<!-- 项目 主页 -->
<template>
  <div>
    <!-- 判断bannerData是否有值，如果有值则将bannerData传递给Banner组件 -->
    <Banner :bannerData="bannerData" v-if="bannerData"></Banner>
    <Nav>
      <!--      <template v-slot:nav1="scope">通知公告{{scope.childData}}</template>-->
      <template v-slot:nav1>通知公告</template>
      <template v-slot:nav2>岗位招聘</template>
      <template v-slot:nav3>投递记录</template>
      <template v-slot:nav4>账户管理</template>
    </Nav>
    <ScrollBar :scrollBarData="scrollBarData" v-if="scrollBarData"></ScrollBar>
    <!--将公告数据传递给子组件-->
    <Notice :noticeData="noticeData" v-if="noticeData" id="notice"></Notice>
  </div>

</template>

<script setup>
import {inject, ref} from 'vue'
import Nav from "@/components/nav.vue";
import Banner from "@/components/banner.vue";
import ScrollBar from '@/components/scrollBar.vue'
import Notice from '@/components/notice.vue'

const $root = inject('$root');
const $axios = inject('$axios');

/**
 * 广告栏数据
 */
const bannerData = ref([]);

/**
 * 滚动栏数据
 */
const scrollBarData = ref([]);

/**
 *获取公告栏数据
 */
const noticeData = ref([]);


/**
 * 获取广告栏数据
 */
const getBannerData = () => $axios.get($root + `/banner/get/`)

/**
 // $axios.get($root + `/banner/get/`)
 //     .then(r => {
 //       console.log(r)
 //       bannerData.value = r.data.data
 //     })
 */


/**
 * 获取滚动栏数据(直播列表数据)
 * // getBannerData()
 */
const getScrollData = () => $axios.get($root + `/live/get/`)


/**
 * 获取滚动栏数据(公告栏数据)
 */
const getNoticeData = () => $axios.get($root + `/notice/`)

/**
 * 发起并发请求
 */
$axios.all([getBannerData(), getScrollData(),getNoticeData()]).then($axios.spread(function (bannerRes, scrollBarRes,noticeRes) {
//bannerRes,scrollBarRes请求到的广告图数据和请求到的滚动栏数据
  //noticeData获取公告栏数据
  console.log('bannerRes', bannerRes)
  console.log('scrollBarRes', scrollBarRes)
  bannerData.value = bannerRes.data.data
  scrollBarData.value = scrollBarRes.data.data
  noticeData.value = noticeRes.data.data.data

}));

</script>